<template>
  <div class="right-center">
    <nav class="title"></nav>

    <main class="right-center-main">
      <div class="item-pre">
        <app-vue-echarts :option="getOption1()"/>
        <div>
          <div class="bottom-label">
            <div class="pre-label">营收入</div>
            <div class="pre-price">5千万以上</div>
            <div class="pre-number">
              <strong>205</strong>
              <span>家</span>
            </div>
          </div>
        </div>
      </div>
      <div class="item-pre">
        <app-vue-echarts :option="getOption2()"/>
        <div>
          <div class="bottom-label">
            <div class="pre-label">营收入</div>
            <div class="pre-price">1亿元以上</div>
            <div class="pre-number">
              <strong>25</strong>
              <span>家</span>
            </div>
          </div>
        </div>
      </div>
      <div class="item-pre">
        <app-vue-echarts :option="getOption3()"/>
        <div>
          <div class="bottom-label">
            <div class="pre-label">营收入</div>
            <div class="pre-price">5亿元以上</div>
            <div class="pre-number">
              <strong>15</strong>
              <span>家</span>
            </div>
          </div>
        </div>
      </div>
      <div class="item-pre">
        <app-vue-echarts :option="getOption4()"/>
        <div>
          <div class="bottom-label">
            <div class="pre-label">营收入</div>
            <div class="pre-price">10亿元以上</div>
            <div class="pre-number">
              <strong>5</strong>
              <span>家</span>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts" name="LeftTop">
import {getOption1} from '../options/rightCenter/option1'
import {getOption2} from '../options/rightCenter/option2'
import {getOption3} from '../options/rightCenter/option3'
import {getOption4} from '../options/rightCenter/option4'

</script>

<style scoped lang="less">
.right-center{
  width: 490px;
  height: 310px;
  position: absolute;
  right: 35px;
  top: 405px;
  .title{
    width: 450px;
    height: 35px;
    margin: 13.22px 10px 0 10px;
    background-image: url(../assets/right-center.svg);
  }
  .right-center-main{
    height: 300px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .item-pre{
      width: 25%;
      height: 180px;
      .bottom-label{
        text-align: center;
        .pre-label{
          color: #A1C1FF;
          font-size: 14px;
        }
        .pre-price{
          color: #A1C1FF;
          margin: 5px 0;
          font-size: 16px;
        }
        .pre-number{
          color: #A1C1FF;
          font-size: 25px;
          span{
            margin-left: 5px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
